
.uploadImgBox {
  display: flex;
  width: 100%;
  .previewBox {
    position: relative;
    padding: 8px;
    margin: 0 10px 10px 0;
    width: 104px;
    height: 104px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    .thumb {
      width: 86px;
      height: 86px;
    }
    .maskBox {
      position: absolute;
      left: 8px;
      top: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 86px;
      height: 86px;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: all .3s;
      &:hover {
        opacity: 1;
      }
      .iconBox {
        display: flex;
        justify-content: center;
        .icon {
          width: 16px;
          margin: 0 4px;
          color: rgba(255, 255, 255, 0.85);
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
  }
}

.uploadFileBox {
  width: 100%;
  .fileBox {
    .fileListItem {
      height: 22px;
      margin-top: 8px;
      font-size: 14px;
      &:hover .fileListItemInfo {
        background-color: #f5f5f5;
        .iconCheck {
          opacity: 1;
        }
        .iconDelete {
          opacity: 1;
        }
      }
      .fileListItemInfo {
        padding: 0 4px;
        display: flex;
        align-items: center;
        transition: background-color .3s;
        .icon {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
          cursor: pointer;
        }
        .iconCheck {
          opacity: 0;
        }
        .iconDelete {
          margin-left: 10px;
          opacity: 0;
        }
        .fileLink {
          padding: 0 8px;
          width: 100%;
          color: #1d7dfa;
          cursor: pointer;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
}

.tipsContent {
  font-size: 12px;
  color: #999999;
  text-align: left;
}